<template>
  <div class="Createcourse">
    <div class="Createcourse-title"> 入驻私教</div>
    <div class="Createcourse-content">
      <label class="Courses-cover">
        <span>
          <i>*</i> 头像
        </span>
        <el-upload
          class="avatar-uploader"
          :action="domain"
          :show-file-list="false"
          :before-upload="beforeUploadGetKey"
          :data="QiNiYun"
          :on-success="Uploadcoursecover"
          style="margin-left: 4%;"
        >
          <img v-if="FrontofidcardimageUrl" :src="FrontofidcardimageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </label>
      <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 姓名
        </span>
        <input autocomplete="off" type="text" name="username" v-model="full_name" />
      </label>
      <label class="Createcourse-type">
        <span>
          <i>*</i> 性别
        </span>
        <el-select v-model="Classtypesvlaue" value-key="label" @change="ChangeClasstypes">
          <el-option v-for="item in Classtypes" :key="item.label" :label="item.value" :value="item"></el-option>
        </el-select>
      </label>
      <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 年龄
        </span>
        <input autocomplete="off" type="text" name="username" v-model="master_age" oninput="value=value.replace(/[^\d]/g,'')"/>
      </label>
      <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 住址
        </span>
        <el-input v-model="nhom_address" disabled placeholder="请输入住址" style="width: 50%;margin-left: 33px;"></el-input>
          <img src="/images/椭圆 31@2x.png" @click="mapshow" alt="" class="adds" >
      </label>
      <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 联系方式
        </span>
        <input autocomplete="off" type="text" name="username" v-model="mobile" />
      </label>
      <label class="Createcourse-type">
        <span>
          <i>*</i> 教学语言
        </span>
        <el-select multiple v-model='teacher_language' @change='changeSelect' @remove-tag='removeTag' placeholder='请选择教学语言'>
            <el-option v-for='(item, index) in nationality_typeList' :key='index' :label='item.languageC' :value='item.languageE'></el-option>
        </el-select>
      </label>
      <label class="Createcourse-type">
        <span>
          <i>*</i> 服务类型
        </span>
        <el-select multiple v-model="servetypesvalue" @change="Changeservetypes" value-key="label" @remove-tag='removeTag'>
          <el-option v-for="(item,index) in servetypes" :key="index" :label="item.value" :value="item"></el-option>
        </el-select>
      </label>
      <!-- <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 服务范围
        </span>
        <input autocomplete="off" type="text" name="username" v-model="phone" />
      </label> -->
      <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 收费标准
        </span>
        <input autocomplete="off" type="text" name="username" v-model="charging_standard" @focus="replaceDanwei(1)" @blur="addDanwei(1)"/>
      </label>
      <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 服务时长
        </span>
        <input autocomplete="off" type="text" name="username" v-model="course_duration" @focus="replaceDanwei(2)" @blur="addDanwei(2)"/>
      </label>
      <label class="Createcourse-type">
        <span>
          <i>*</i> 服务人群
        </span>
        <el-select v-model="peopleListvlaue" value-key="label" @change="ChangepeopleList" style="margin-left: 4%;">
          <el-option v-for="item in peopleList" :key="item.id" :label="item.label" :value="item"></el-option>
        </el-select>
      </label>
      <label class="Createcourse-type">
        <span>
          <i>*</i> 语言等级
        </span>
        <el-select v-model="Languagelevelvalue" value-key="label" @change="ChangeLanguagelevel" style="margin-left: 4%;">
          <el-option v-for="item in Languagelevel" :key="item.id" :label="item.label" :value="item"></el-option>
        </el-select>
      </label>
      <label class="Realnameauthentication-con">
        <span>
          <i>*</i> 最大学生数
        </span>
        <input autocomplete="off" type="text" name="username" v-model="wheatLists" />
        <!-- <el-select v-model="wheatLists" style="margin-left:0%">
          <el-option v-for="(item,index) in wheatList" :key="index" :label="item" :value="item"></el-option>
        </el-select> -->
      </label>
      <label class="Createcourse-Introduction">
        <span>个人简介</span>
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="introduction"
          maxlength="200"
          show-word-limit
        ></el-input>
      </label>     
      <label class="Createcourse-wheat">
        <span>相关证明材料</span>
        <el-upload
          class="avatar-uploader"
          :action="domain"
          :show-file-list="false"
          :on-success="Uploadcourintroductioncover"
          :data="QiNiYuns"
          :before-upload="beforeUploadGetKeys"
          multiple
        >
          <img v-if="introduction_cover" :src="introduction_cover" class="avatars" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </label>
      <label class="Createcourse-button">
        <span>取消</span>
        <span @click="createClasss">提交</span>
      </label>
    </div>
    <Map v-show="Isshow" :Isshow.sync ='Isshow' :latitude.sync='latitude' :longitude.sync='longitude' :mechanism_addr.sync="nhom_address"></Map>
  </div>
</template>
<script>
import Map from '../../../components/map'
export default {
  name: "privateEducationCertification",
  data() {
    return {
      latitude:localStorage.getItem('latitude'),
      longitude:localStorage.getItem('longitude'),
      teach_language:[],
      servetypesvalue:'',
      servetypesvalue1:'',
      peopleListvlaue:'',
      nhom_address:'',
      master_age:'',
      full_name:'',
      charging_standard1:'',
      course_duration1:'',
      course_duration:'',
      charging_standard:'',
      name:'',
      mobile:'',
      teacher_language:[],
      nationality_typeList:[
            {
                languageE:"Estonian",
                languageC:"爱沙尼亚语"
                },
            {
                languageE:"Arabic",
                languageC:"阿拉伯语"
                },
            {
                languageE:"Bulgarian",
                languageC:"保加利亚语"
                },
            {
                languageE:"polish",
                languageC:"波兰语"
                },
            {
                languageE:"Danish",
                languageC:"丹麦语"
                },
            {
                languageE:"German",
                languageC:"德语"
                },
            {
                languageE:"Russian",
                languageC:"俄语"
                },
            {
                languageE:"Traditional Chinese",
                languageC:"繁体中文"
                },
            {
                languageE:"French",
                languageC:"法语"
                },
            {
                languageE:"Finnish",
                languageC:"芬兰语"
                },
            {
                languageE:"Korean",
                languageC:"韩语"
                },
            {
                languageE:"Dutch",
                languageC:"荷兰语"
                },
            {
                languageE:"Czech",
                languageC:"捷克语"
                },
            {
                languageE:"romanian",
                languageC:"罗马尼亚语"
                },
            {
                languageE:"Portuguese",
                languageC:"葡萄牙语"
                },
            {
                languageE:"Japanese",
                languageC:"日语"
                },
            {
                languageE:"Swedish",
                languageC:"瑞典语"
                },
            {
                languageE:"slovenian",
                languageC:"斯洛文尼亚语"
                },
            {
                languageE:"Thai",
                languageC:"泰语"
                },
            {
                languageE:"Spanish",
                languageC:"西班牙语"
                },
            {
                languageE:"Greek",
                languageC:"希腊语"
                },
            {
                languageE:"hun",
                languageC:"匈牙利语"
                },
            {
                languageE:"Italian",
                languageC:"意大利语"
                },
            {
                languageE:"English",
                languageC:"英语"
                },
            {
                languageE:"Vietnamese",
                languageC:"越南语"
                },
            {
                languageE:"cantonese",
                languageC:"粤语"
                },
            {
                languageE:"Chinese",
                languageC:"中文"
                }
        ],
      
      
      Language: "",
      Languagelevel: [
        {
          label: "零基础",
          id: 1,
          value: "Zero basis"
        },
        {
          label: "初级",
          id: 2,
          value: "Senior"
        },
        {
          label: "中级",
          id: 3,
          value: "Intermediate"
        },
        {
          label: "高级",
          id: 4,
          value: "Primary"
        }
      ],
      Languagelevelvalue: "",
      FrontofidcardimageUrl: "/images/课程封面.png",
      unserinfo: JSON.parse(localStorage.getItem("userinfo")),
      servetypes: [
        {
          label: "2",
          value: "线上服务",
          id: 1
        },
        {
          label: "1",
          id: 2,
          value: "上门服务"
        },
      ],
      Classtypes: [
        {
          label: "1",
          value: "男",
          id: 1
        },
        {
          label: "2",
          id: 2,
          value: "女"
        }
      ],
      Classtypesvlaue: "",
      wheatList: ["1", "2", "3", "4"],
      wheatLists: "",
      textarea: "",
      QiNiYun: {
        key: "",
        token: ""
      },
      QiNiYuns: {
        key: "avatoravatoravatorasss",
        token: ""
      },
      domain: "http://up-z0.qiniup.com",
      qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
      upload_qiniu_addr: "http://img.curiousmore.com/",
      classroom_type: "",
      introduction_cover: "",
      introduction:'',
      language_level: "",
      Isshow:false,
      peopleList:[
        {
          label: "幼儿",
          id: 1,
          value: "Childhood"
        },
        {
          label: "青少年",
          id: 2,
          value: "Teenagers"
        },
        {
          label: "大学生",
          id: 3,
          value: "University Student"
        },
        {
          label: "成人",
          id: 4,
          value: "Adult"
        }
      ],
    };
  },
  components: {//组件注册
    Map
  },
  computed:{
      nhom_address:{
          get(){
              this.fn(this.$refs.child.nhom_address);
              console.log(this.$refs.child.nhom_address,'=>')
              return this.$refs.child.nhom_address;
          } 
      }
  },
  mounted() {
    this.getQiniuToken();
    this.getQiniuTokens();
  },
  methods: {
    mapshow(){
      var _this = this
      _this.Isshow = true
    },
    addDanwei(id){
      let _this = this
      if(id == 1){
        _this.charging_standard1 = _this.charging_standard
        _this.charging_standard = _this.charging_standard + '元/课时'
      }else if (id == 2){
        _this.course_duration1 = _this.course_duration
        _this.course_duration = _this.course_duration + '分钟/课时'
      }
      
    },
    replaceDanwei(id){
      let _this = this
      if(id == 1){
        _this.charging_standard = _this.charging_standard.replace('元/课时','')
      }else if(id == 2){
        _this.course_duration = _this.course_duration.replace('分钟/课时','')
      }
      
    },
    removeTag(val) {
      if (val === '全选') {
        this.selectedArray = []
      }
    },
    changeSelect(val) {
      this.language = val
      this.teach_language = this.language.join(',')
      console.log(this.language)
    },
    
  
    Uploadcoursecover(res, file) {
      //上传身份证正面
      this.FrontofidcardimageUrl = this.upload_qiniu_addr + res.key;
      console.log(this.FrontofidcardimageUrl);
    },
    
    Uploadcourintroductioncover(res, file) {
      this.introduction_cover = this.upload_qiniu_addr + res.key;
    },
    beforeUploadGetKey() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuToken();
    },
    beforeUploadGetKeys() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuTokens();
    },
    
    
    //请求后台拿七牛云token
    getQiniuToken() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        data: data
      })
        .then(response => {
          this.QiNiYun.token = response.data.data;
          this.QiNiYun.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getQiniuTokens() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        data: data
      })
        .then(response => {
          this.QiNiYuns.token = response.data.data;
          this.QiNiYuns.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    ChangeClasstypes(e) {
      //课程选择
      this.classroom_type = e.label;
      console.log(this.classroom_type);
    },
    Changeservetypes(e){
      console.log(e[0].id,e)
      if(e.length > 1){
        this.servetypesvalue1 = 3
      }else{
        this.servetypesvalue1 = e[0].id
      }
      console.log(this.servetypesvalue1)
    },
    ChangepeopleList(e){
      this.peopleListvlaue = e.label
    },
    ChangeLanguagelevel(e){
      console.log(e.value)
      this.Languagelevelvalue = e.label;
    },
    createClasss() {
      //入驻私教
      var data = {
        charging_standard:this.charging_standard1,
        course_duration:this.course_duration1,
        full_name:this.full_name,
        grade:1,
        introduction:this.introduction,
        language_level:this.Languagelevelvalue,
        master_age:this.master_age,
        max_student_count:this.wheatLists,
        mobile:this.mobile,
        nhom_address:this.nhom_address,
        photo:this.FrontofidcardimageUrl,
        relevant_information:this.introduction_cover,
        serve_people:this.peopleListvlaue,
        service_type:this.servetypesvalue1,
        sex:this.classroom_type,
        teach_language:this.teach_language,
        teach_language_url:'',//视频地址
        type:'private_education',
        user_id:this.unserinfo.user_id,
        latitude:this.latitude,
        longitude:this.longitude,
        mechanism_id:this.unserinfo.mechanism_id,
      };
      console.log(data);
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/user/masterInfo/insert",
        data: data
      }).then(res => {
        console.log(res.data)
      }).catch(error => {
        console.log(error);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.adds{
  right: 30px;
    height: 29px;
    position: relative;
    top: 5px;
}
  .Realnameauthentication-con {
    display: block;
    width: 80%;
    text-align: left;
    margin-top: 20px;
    height: 40px;
    span {
      display: inline-block;
      width: 10%;
      height: 40px;
      line-height: 40px;
      text-align: left;
    }
    input {
      width: 47.5%;
      height: 30px;
      border: 1px solid #cecece;
      padding: 2px 10px 2px 10px;
      outline: none;
      margin-left: 4%;
    }
  }


.isChoose {
  border: 1px solid #47cecd;
}
.unChoose {
  border: 1px solid #fff;
}
.rule {
  position: absolute;
  width: 0.82rem;
  height: 0.36rem;
  top: 0.08rem;
  right: 0rem;
  background: #111111;
}




.Createcourse {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
}
.Createcourse-title {
  position: relative;
  width: 90%;
  height: 90px;
  margin: 0 auto;
  display: flex;
  font-size: 20px;
  align-items: center;
  border-bottom: 1px solid #47cecf;
  color: #2dc7c8;
  font-weight: bold;
  letter-spacing: 8px;
}
.Createcourse-content {
  position: relative;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.Createcourse-content > label {
  display: flex;
  width: 100%;
  margin-top: 30px;
  span {
    width: 12%;
    i {
      color: #ff7336;
    }
  }
}
.avatars {
  width: 100px;
}
.Courses-cover {
  width: 100%;
  height: 200px;
  /deep/.avatar-uploader {
    width: 200px;
    border: 1px solid rgba(206, 206, 206, 1);
    /deep/.el-upload {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: auto;
        max-width: 80%;
      }
    }
  }
}

.Createcourse-topic,
.Createcourse-type,
.Createcourse-class,
.Createcourse-Languagelevel,
.Createcourse-wheat {
  height: 60px;
  align-items: center;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
    margin-left: 4%;
  }
  /deep/.el-select__tags{
    width: 40%;
  }
}


.Createcourse-wheat > span {
  width: 14% !important;
}
.Createcourse-Introduction {
  height: 100px;
  align-items: center;
  /deep/.el-textarea {
    width: 50%;
    // height: 100px;
    padding-left: 4%;
  }
}
.Createcourse-button {
  height: 100px;
  align-items: center;
  padding-bottom: 100px;
  span {
    width: 20% !important;
    height: 41px;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
    &:first-child {
      background: rgba(222, 222, 222, 1);
      border-radius: 21px;
      margin-left: 14%;
    }
    &:last-child {
      background: rgba(58, 203, 204, 1);
      border-radius: 21px;
      color: #ffffff;
      margin-left: 4%;
    }
  }
}
</style>